<template>
  <div v-if="tabAvtive1 == 1" class="robot-popover-model">
    <div>
      <div class="dimension">
        <span>工作效率提升</span>
        <span class="count">{{ data.hl_we_improvement || '' }}</span>
      </div>
      <div class="tip">
        <span>人工操作时长/RPA操作时长>200%或代替人工实行运行（40-50）</span>
      </div>
      <div class="tip">
        <span>人工操作时长/RPA操作时长>100%(21-39)</span>
      </div>
      <div class="tip">
        <span>人工操作时长/RPA操作时长&lt;100%(1-20)</span>
      </div>
    </div>
    <div>
      <div class="dimension">
        <span>执行成功率</span>
        <span class="count">{{ data.hl_es_rate || '' }}</span>
      </div>
      <div class="tip">
        <span>成功率≥90%（25-30）</span>
      </div>
      <div class="tip">
        <span>90%>成功率≥70%（18-24）</span>
      </div>
      <div class="tip">
        <span>成功率&lt;70%（1-17）</span>
      </div>
    </div>
    <div>
      <div class="dimension">
        <span>工作流程优化</span>
        <span class="count">{{ data.hl_wf_optimization || '' }}</span>
      </div>
      <div class="tip">
        <span>对原先业务流程有较大优化（12-20）</span>
      </div>
      <div class="tip">
        <span>对原先业务流程优化较小（1-11）</span>
      </div>
    </div>
  </div>
  <div v-if="tabAvtive1 == 2" class="flex robot-popover-model">
    <div>
      <div>
        <div class="dimension">
          <span>工作效率提升</span>
          <span class="count">{{ data.uf_we_improvement || '' }}</span>
        </div>
        <div class="tip">
          <span>人工操作时长/RPA操作时长>200%或代替人工实时运行 (20-30)</span>
        </div>
        <div class="tip">
          <span>人工操作时长/RPA操作时长>100% (10-20)</span>
        </div>
        <div class="tip">
          <span>人工操作时长/RPA操作时长&lt;100% (1-10)</span>
        </div>
      </div>
      <div>
        <div class="dimension">
          <span>场景使用频率</span>
          <span class="count">{{ data.uf_su_rating || '' }}</span>
        </div>
        <div class="tip">
          <span>使用频率较高（13-20）</span>
        </div>
        <div class="tip">
          <span>使用频率一般（7-12）</span>
        </div>
        <div class="tip">
          <span>使用频率较低（1-6）</span>
        </div>
      </div>
      <div>
        <div class="dimension">
          <span>跨系统处理能力</span>
          <span class="count">{{ data.uf_csp_capability || '' }}</span>
        </div>
        <div class="tip">
          <span>涉及多个系统（6-10）</span>
        </div>
        <div class="tip">
          <span>一个系统（5）</span>
        </div>
      </div>
      <div>
        <div class="dimension">
          <span>工作流程优化</span>
          <span class="count">{{ data.uf_wf_optimization || '' }}</span>
        </div>
        <div class="tip">
          <span>对原先业务流程有较大优化（6-10）</span>
        </div>
        <div class="tip">
          <span>对原先业务流程优化较小（1-5）</span>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div class="dimension">
          <span>业绩指标提升</span>
          <span class="count">{{ data.uf_pi_improvement || '' }}</span>
        </div>
        <div class="tip">
          <span>对提升部门考核指标意义很大（6-10）</span>
        </div>
        <div class="tip">
          <span>对提升部门考核指标意义一般（3-5）</span>
        </div>
        <div class="tip">
          <span>对提升部门考核指标意义很小（1-2）</span>
        </div>
      </div>
      <div>
        <div class="dimension">
          <span>业务覆盖率</span>
          <span class="count">{{ data.uf_bc_rate || '' }}</span>
        </div>
        <div class="tip">
          <span>90%≤自动化流程覆盖整体业务率（10分）</span>
        </div>
        <div class="tip">
          <span>60%≤自动化流程覆盖整体业务率（5-9分）</span>
        </div>
        <div class="tip">
          <span>40%≤自动化流程覆盖整体业务率（1-4分）</span>
        </div>
      </div>
      <div>
        <div class="dimension">
          <span>准确性提高</span>
          <span class="count">{{ data.uf_au_increase || '' }}</span>
        </div>
        <div class="tip">
          <span>准确率越高则分数越高</span>
        </div>
      </div>
      <div>
        <div class="dimension">
          <span>使用友好度</span>
          <span class="count">{{ data.uf_user_friendliness || '' }}</span>
        </div>
        <div class="tip">
          <span>使用方式简单，维护成本低（4-5分）</span>
        </div>
        <div class="tip">
          <span>使用方式较简单，维护成本较低（2-3分）</span>
        </div>
      </div>
    </div>
  </div>
  <div v-if="tabAvtive1 == 3" class="robot-popover-model">
    <div>
      <div class="dimension">
        <span>场景使用频率</span>
        <span class="count">{{ data.app_su_rating || '' }}</span>
      </div>
      <div class="tip">
        <span>使用频率较高（35-50）</span>
      </div>
      <div class="tip">
        <span>使用频率一般（20-34）</span>
      </div>
      <div class="tip">
        <span>使用频率较低（1-19）</span>
      </div>
    </div>
    <div>
      <div class="dimension">
        <span>RPA运行时长</span>
        <span class="count">{{ data.app_rpa_runtime || '' }}</span>
      </div>
      <div class="tip">
        <span>全天（40）</span>
      </div>
      <div class="tip">
        <span>4-7小时（25-39）</span>
      </div>
      <div class="tip">
        <span>1-4小时（16-24）</span>
      </div>
      <div class="tip">
        <span>&lt;1小时（1-15）</span>
      </div>
    </div>
    <div>
      <div class="dimension">
        <span>跨系统处理能力</span>
        <span class="count">{{ data.app_csp_capability || '' }}</span>
      </div>
      <div class="tip">
        <span>涉及2个系统以上（10）</span>
      </div>
      <div class="tip">
        <span>涉及2个系统（7）</span>
      </div>
      <div class="tip">
        <span>一个系统（5）</span>
      </div>
    </div>
  </div>
  <div v-if="tabAvtive1 == 4" class="robot-popover-model">
    <div>
      <div class="dimension">
        <span>使用友好度</span>
        <span class="count">{{ data.cp_user_friendliness || '' }}</span>
      </div>
      <div class="tip">
        <span>使用方式简单，维护成本低（21-30）</span>
      </div>
      <div class="tip">
        <span>使用方式较简单，维护成本较低（11-20）</span>
      </div>
      <div class="tip">
        <span>使用方式高，维护成本高（1-10）</span>
      </div>
    </div>
    <div>
      <div class="dimension">
        <span>场景使用频率</span>
        <span class="count">{{ data.cp_su_rating || '' }}</span>
      </div>
      <div class="tip">
        <span>使用频率较高（21-30）</span>
      </div>
      <div class="tip">
        <span>使用频率一般（11-20）</span>
      </div>
      <div class="tip">
        <span>使用频率较低（1-10）</span>
      </div>
    </div>
    <div>
      <div class="dimension">
        <span>业务覆盖率</span>
        <span class="count">{{ data.cp_bc_rate || '' }}</span>
      </div>
      <div class="tip">
        <span>90%≤自动化流程覆盖整体业务率（30）</span>
      </div>
      <div class="tip">
        <span>60%≤自动化流程覆盖整体业务率（12-29）</span>
      </div>
      <div class="tip">
        <span>40%≤自动化流程覆盖整体业务率（1-11）</span>
      </div>
    </div>
    <div>
      <div class="dimension">
        <span>准确率</span>
        <span class="count">{{ data.cp_accuracy || '' }}</span>
      </div>
      <div class="tip">
        <span>准确率越高则分数越高（100%=10）</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue'
  const props = defineProps({
    tabAvtive1: {
      type: Number,
      default: 1
    },
    scoreJsonString: {
      type: String,
      default: '[{}]'
    }
  })

  let data = ref<object>({})

  watch(
    props,
    () => {
      try {
        let arr = JSON.parse(props.scoreJsonString)
        data.value = arr[0]
      } catch (error) {
        data.value = {}
      }
    },
    {
      deep: true,
      immediate: true
    }
  )
</script>

<style lang="scss">
  .robot-popover-model {
    .dimension {
      font-size: 14px !important;
      padding: 12px 0 4px;
      .count {
        color: #4bb2b1 !important;
        margin-left: 20px !important;
      }
    }
    .tip {
      font-size: 12px !important;
      line-height: 18px !important;
      padding: 0 16px 0 10px;
      // max-width: 360px;
      color: #bbb;
    }
    .tip {
    }
  }
</style>
